<template>
  <img class="bgImg" :src="songDetail.al.picUrl" alt="" />
  <!-- 头部 -->
  <div class="songDetail_box">
    <div class="detail_top_left">
      <svg class="icon" aria-hidden="true" @click="updataIsShowDetail">
        <use xlink:href="#icon-hanbaobao"></use>
      </svg>
      <div class="in_to_left">
        <Vue3Marquee>
          {{ songDetail.al.name }}
        </Vue3Marquee>
        <span v-for="(item, index) in songDetail.ar" :key="index">{{
          item.name
        }}</span>
      </div>
    </div>
    <div class="detail_top_right">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-hanbaobao"></use>
      </svg>
    </div>
  </div>
  <!-- 内容区 -->
  <div class="songDetail_content" ref="musicLyric">
    <p
      :class="{
        active:
          currentTime * 1000 >= item.time && currentTime * 1000 < item.pre,
      }"
      v-for="(item, index) in getEveryLyrics"
      :key="index"
    >
      {{ item.lrc }}
    </p>
  </div>
  <!-- 最底部播放卡片 -->
  <!-- 进度条 -->
  <input type="range" class="range" min="0" :max="duration" v-model="currentTime" step="0.05">

  <div class="songDetail_footer_card">
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-hanbaobao"></use>
    </svg>
    <svg class="icon" aria-hidden="true" @click="change_play(-1)">
      <use xlink:href="#icon-hanbaobao"></use>
    </svg>
    <div class="bofang">
      <svg class="icon" aria-hidden="true" v-if="isbtnShow" @click="play()">
        <use xlink:href="#icon-bofang"></use>
      </svg>
      <svg class="icon" aria-hidden="true" v-else @click="play()">
        <use xlink:href="#icon-bofang1"></use>
      </svg>
    </div>
    <svg class="icon" aria-hidden="true" @click="change_play(1)">
      <use xlink:href="#icon-hanbaobao"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-hanbaobao"></use>
    </svg>
  </div>
</template>

<script>
import { Vue3Marquee } from "vue3-marquee";
import "vue3-marquee/dist/style.css";
import { mapMutations, mapState } from "vuex";
export default {
  props: ["songDetail", "play","getDuration"],
  components: { Vue3Marquee },
  computed: {
    ...mapState([
      "isbtnShow",
      "lyric",
      "playListIndex",
      "currentTime",
      "playList",
      "duration"
    ]),
    getEveryLyrics() {
      let arr;
      if (this.lyric) {
        arr = this.lyric.split(/[(\r\n)\r\n]+/).map((item, i) => {
          let min = item.slice(1, 3);
          let sec = item.slice(4, 6);
          let mill = item.slice(7, 10);
          let lrc = item.slice(11, item.length);
          let time =
            parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
          if (isNaN(Number(mill))) {
            mill = item.slice(7, 9);
            lrc = item.slice(10, item.length);
            time =
              parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
          }
          return { min, sec, mill, lrc, time };
        });
        arr.forEach((item, i) => {
          if (i === arr.length - 1 || isNaN(arr[i + 1].time)) {
            item.pre = 100000;
          } else {
            item.pre = arr[i + 1].time;
          }
        });
      }
      console.log(arr);
      return arr;
    },
  },
  watch: {
    currentTime(newValue) {
      let p = document.querySelector("p.active");
      //可以看到动态的p标签
      // console.log([p]);

      // 让歌词居中，修改滚轮(scrollTop)的值
      if (p) {
        if (p.offsetTop > 300) {
          this.$refs.musicLyric.scrollTop = p.offsetTop - 300;
        }
      }
      // 如果当前歌曲播放完整之后
      if(newValue >= this.duration){
        // 如果播放到最后一首歌，则返回到第一首歌并播放
        if (this.playListIndex === this.playList.length - 1) {
        this.updataPlayListIndex(0);
        this.play();
      }else{
        // 如果不是最后最后一首歌的话就跳转下一首歌
        this.updataPlayListIndex(this.playListIndex+1)
      }
      }
      this.getDuration()
    },
    // 当歌单下标索引值改变的时候，更新仓库里面的duration的值
    playListIndex(){
      this.getDuration()
    }
  },
  methods: {
    ...mapMutations(["updataIsShowDetail","updataPlayListIndex"]),
    // last_play(){
    //   this.updataPlayListIndex(this.playListIndex-1)
    // },
    // next_play(){
    //   this.updataPlayListIndex(this.playListIndex+1)
    // },

    // 上一首歌和下一首歌
    change_play(value){
      let num = this.playListIndex+value
      if(num<0){
        num = this.playList.length -1
      }
      if(num >= this.playList.length){
        num = 0
      }
      this.play()
      this.updataPlayListIndex(num)
    }
  },
};
</script>

<style lang="less" scoped>
.bgImg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: -1;
  filter: blur(100px);
}

.songDetail_box {
  width: 100%;
  height: 50px;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;

  .icon {
    width: 50px;
    fill: #fff;
  }

  .detail_top_left {
    width: 60%;
    display: flex;

    .in_to_left {
      padding: 0 5px;
    }
  }
}

// 最底部播放卡片样式
.songDetail_footer_card {
  width: 100%;
  height: 70px;
  position: fixed;
  background-color: rgba(255, 255, 255, 0.3);
  bottom: 0;
  border-top: solid 1px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: space-around;
  align-items: center;

  .bofang {
    svg {
      width: 50px;
      height: 50px;
    }
  }

  .icon {
    fill: #fff;
  }
}

.songDetail_content {
  width: 100%;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: scroll;
  p {
    color: rgb(190, 181, 181);
    margin-bottom: 0.3rem;
  }
  .active {
    font-size: 0.5rem;
    color: #fff;
  }
}

// 进度条
.range{
  width: 100%;
}
</style>